<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>分类管理 - 优选商城后台</title>
    <th:block th:fragment="styles">
        <style>
            .category-icon {
                width: 24px;
                height: 24px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: #f8f9fa;
                border-radius: 4px;
                margin-right: 8px;
            }
            .category-name {
                display: flex;
                align-items: center;
            }
            .status-badge {
                width: 80px;
                text-align: center;
            }
        </style>
    </th:block>
</head>
<body>
    <div th:fragment="content">
        <div class="container py-4">
            <!-- 顶部区域 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="mb-0">
                    <i class="bi bi-grid me-2"></i>分类管理
                </h4>
                <button class="btn btn-primary" onclick="showAddModal()">
                    <i class="bi bi-plus-lg me-2"></i>新增分类
                </button>
            </div>

            <!-- 主体区域 -->
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>分类名称</th>
                                    <th>图标</th>
                                    <th>排序</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="category : ${categories}">
                                    <td>
                                        <div class="category-name">
                                            <i class="bi bi-folder me-2"></i>
                                            <span th:text="${category.name}">分类名称</span>
                                        </div>
                                    </td>
                                    <td>
                                        <i th:class="${category.icon}" class="category-icon"></i>
                                    </td>
                                    <td th:text="${category.sort}">0</td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" 
                                                   th:checked="${category.status == 1}"
                                                   th:onclick="'updateStatus(' + ${category.id} + ', ' + (${category.status == 1} ? 0 : 1) + ')'">
                                        </div>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-primary" th:onclick="'showEditModal(' + ${category.id} + ')'">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-danger" th:onclick="'deleteCategory(' + ${category.id} + ')'">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增/编辑弹窗 -->
        <div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="categoryModalLabel">新增分类</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="categoryForm">
                            <input type="hidden" id="id" name="id">
                            <div class="mb-3">
                                <label class="form-label">分类名称</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">图标</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi" id="iconPreview"></i></span>
                                    <input type="text" class="form-control" id="icon" name="icon" 
                                           placeholder="例如：bi-phone" oninput="updateIconPreview()">
                                </div>
                                <div class="form-text">输入 Bootstrap Icons 图标类名，例如：bi-phone</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">排序</label>
                                <input type="number" class="form-control" id="sort" name="sort" value="0" min="0">
                            </div>
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="status" name="status" checked>
                                    <label class="form-check-label">启用</label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveCategory(); return false;">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:fragment="scripts">
        <script>
            // 更新图标预览
            function updateIconPreview() {
                const iconClass = $('#icon').val();
                $('#iconPreview').attr('class', 'bi ' + iconClass);
            }

            // 显示添加分类模态框
            function showAddModal() {
                // 清空表单
                $('#categoryForm')[0].reset();
                $('#id').val('');
                $('#categoryModalLabel').text('新增分类');
                $('#iconPreview').attr('class', 'bi');
                
                // 显示模态框
                $('#categoryModal').modal('show');
            }

            // 显示编辑分类模态框
            function showEditModal(id) {
                $('#categoryModalLabel').text('编辑分类');
                // 获取分类信息
                $.ajax({
                    url: '/admin/api/categories/' + id,
                    type: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.code === 0) {
                            const category = res.data;
                            $('#id').val(category.id);
                            $('#name').val(category.name);
                            $('#icon').val(category.icon);
                            $('#sort').val(category.sort);
                            $('#status').prop('checked', category.status === 1);
                            
                            // 更新图标预览
                            updateIconPreview();
                            
                            // 显示模态框
                            $('#categoryModal').modal('show');
                        } else {
                            showError(res.msg || '获取分类信息失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', xhr.responseText);
                        showError('请求失败，请重试');
                    }
                });
            }

            // 保存分类
            function saveCategory() {
                const id = $('#id').val();
                const data = {
                    id: id || null,
                    name: $('#name').val(),
                    icon: $('#icon').val(),
                    sort: parseInt($('#sort').val()) || 0,
                    status: $('#status').prop('checked') ? 1 : 0
                };

                // 表单验证
                if (!data.name) {
                    showError('请输入分类名称');
                    return;
                }

                const url = id ? '/admin/api/categories/update' : '/admin/api/categories/add';
                $.ajax({
                    url: url,
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function(res) {
                        if (res.code === 0) {
                            // 关闭弹窗
                            $('#categoryModal').modal('hide');
                            // 显示成功提示
                            showSuccess(id ? '更新成功' : '添加成功');
                            // 刷新列表
                            setTimeout(function() {
                                window.location.reload();
                            }, 1500);
                        } else {
                            showError(res.msg || (id ? '更新失败' : '添加失败'));
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', xhr.responseText);
                        showError('请求失败，请重试');
                    }
                });
            }

            // 删除分类
            function deleteCategory(id) {
                // 使用自定义确认弹窗
                showConfirmModal({
                    title: '删除确认',
                    message: '确定要删除这个分类吗？',
                    onConfirm: function() {
                        $.ajax({
                            url: '/admin/api/categories/delete/' + id,
                            type: 'POST',
                            success: function(res) {
                                if (res.code === 0) {
                                    showSuccess('删除成功');
                                    setTimeout(function() {
                                        window.location.reload();
                                    }, 1500);
                                } else {
                                    showError(res.msg || '删除失败');
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error('请求失败:', xhr.responseText);
                                showError('请求失败，请重试');
                            }
                        });
                    }
                });
            }

            // 更新分类状态
            function updateStatus(id, status) {
                $.ajax({
                    url: '/admin/api/categories/status/' + id + '/' + status,
                    type: 'POST',
                    success: function(res) {
                        if (res.code === 0) {
                            showSuccess('更新成功');
                            setTimeout(function() {
                                window.location.reload();
                            }, 1500);
                        } else {
                            showError(res.msg || '更新失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', xhr.responseText);
                        showError('请求失败，请重试');
                    }
                });
            }
        </script>
    </th:block>
</body>
</html> 